import { View, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';
import actions from '../../../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../../../selectors';
import * as T from '../../../types';
import { IPLAND_OSS_HOST } from '../../../../constant';
import 'taro-ui/dist/style/components/modal.scss';

interface INewcomerProps {
  isOpened: boolean;
  vipGoNavi: Function;
  notVipGoJingbiyu: Function;
}

type IToolsProps = T.IProps & INewcomerProps;
//@ts-ignore
@connect<Partial<IToolsProps>, T.IToolsBoxState>(store2Props, actions)
export default class NewcomerModal extends Component<Partial<IToolsProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      showFirst: true,
      showVip: false,
      showNotVip: false,
    };
  }

  nextVip = () => {
    this.setState({
      showFirst: false,
      showVip: true,
      showNotVip: false,
    });
  }

  nextNotVip = () => {
    this.setState({
      showFirst: false,
      showVip: false,
      showNotVip: true,
    });
  }

  render() {
    let { isOpened } = this.props;
    let {
      main: { isAquamarineMember, isCrystalMember }
    } = this.props;
    let { showFirst, showVip, showNotVip } = this.state;
    return (
      isOpened ? <View className="box">
        <View closeOnClickOverlay={false}>
          <View className="tips">
            <Image
              src={`${IPLAND_OSS_HOST}home/boy.png`}
              className="boy">
            </Image>
            {showFirst &&
              <View className="first">
                <Image
                  src={`${IPLAND_OSS_HOST}home/sunz.png`}
                  className="welcome">
                </Image>
                <Image
                  src={`${IPLAND_OSS_HOST}home/next.png`}
                  className="next"
                  onClick={() => {
                    if (isAquamarineMember || isCrystalMember) {
                      this.nextVip()
                    } else {
                      this.nextNotVip()
                    }
                  }
                  }>
                </Image>
              </View>
            }
            {showNotVip &&
              <View className="vip">
                <Image
                  src={`${IPLAND_OSS_HOST}home/xinshou.png`}
                  className="xinshou">
                </Image>
                <Image
                  src={`${IPLAND_OSS_HOST}home/next.png`}
                  className="next"
                  onClick={() =>
                    this.props.notVipGoJingbiyu()
                  }>
                </Image>
              </View>
            }
            {showVip &&
              <View className="notVip">
                <Image
                  src={`${IPLAND_OSS_HOST}home/zhuanx.png`}
                  className="zhuanx">
                </Image>
                <Image
                  src={`${IPLAND_OSS_HOST}home/next.png`}
                  className="next"
                  onClick={() =>
                    this.props.vipGoNavi()
                  }>
                </Image>
              </View>
            }
          </View>
        </View>
      </View> : null
    );
  }
}

//create by moon https://github.com/creasy2010/moon
